import * as THREE from 'three';
const model = new THREE.Group();
const lineGroup = new THREE.Group();//边界线组
const meshGroup = new THREE.Group();//区域填充组
const pillarMeshGroup = new THREE.Group();//柱子组

// const size = 1.2;
const mapHeight = 3
const loader = new THREE.FileLoader();
loader.setResponseType("json")
// 解析gdp文件数据
loader.load('/人口密度.json',(data)=>{ 
    const geometry = new THREE.BoxGeometry( 0.3, 0.3, 1 );
    geometry.translate(0, 0, 0.5);
    const colorArr = []
    // geometry.attributes.position
    for(var i = 0; i < geometry.attributes.position.count; i++){
        if(geometry.attributes.position.getZ(i) >0.5){
            colorArr.push(0.0, 1.0, 1.0) 
        }else{
            colorArr.push(0.0, 0.1, 0.1)
        }
    }
    console.log('colorArr',colorArr);
    geometry.attributes.color = new THREE.BufferAttribute(new Float32Array(colorArr), 3);
    console.log('geometry',geometry);
    // 柱子
    data.population.forEach((item)=>{
        var color1 = new THREE.Color(0x229977);
        var color2 = new THREE.Color(0x29ee77);//最大数值对应柱子颜色
        const maxData = 500
        const color = color1.clone().lerp(color2.clone(),item[2]/maxData)
        const material = new THREE.MeshLambertMaterial( {
            color:color,
            vertexColors: true//使用顶点颜色渲染
            // vertexColors: THREE.VertexColors, 
        } );
        const cube = new THREE.Mesh( geometry, material );
        cube.scale.set(1,1,item[2]/100)
        cube.position.set(item[0],item[1],mapHeight +0.01)
        pillarMeshGroup.add(cube)
    })
})
loader.load('/world.json',(data)=>{
    data.features.forEach((area)=>{
        // coordinates数据分为单组和多组，将单组的封装为多组
        if(area.geometry.type === 'Polygon'){
            area.geometry.coordinates = [area.geometry.coordinates]
        }
        lineGroup.add(moreLine(area.geometry.coordinates,mapHeight)) 
        meshGroup.add(shapeMesh(area.geometry.coordinates,area.properties.name,area.properties.center))
    })
    // lineGroup.position.z += mapHeight + 0.01 *mapHeight
    model.add(lineGroup,meshGroup,pillarMeshGroup)
})

// 批量产生轮廓线
const moreLine = (coordinates,gdpvalue)=>{
    const groupLine = new THREE.Group();
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(elem[0],elem[1],0)
        })
        groupLine.add(oneLine(pointArr))
    });
    groupLine.position.z += gdpvalue+ 0.001*gdpvalue
    return groupLine
}
// 产生一条轮廓线
const oneLine = (pointArr)=>{
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array(pointArr);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    const material = new THREE.LineBasicMaterial({
        color: 0x006666
    });
    const line = new THREE.LineLoop(geometry,material);
    return line;
}
// 产生多边形面
const shapeMesh = (coordinates,name,lngLat)=>{
    var heartShape = [];//轮廓形状Shape集合
    coordinates.forEach(polygon => {
        var pointArr = []
        polygon[0].forEach((elem)=>{
            pointArr.push(new THREE.Vector3(elem[0],elem[1],0))
        })
        const shape = new THREE.Shape(pointArr);
        heartShape.push(shape)
    });
    var material = new THREE.MeshLambertMaterial({
        color: 0x004444,
        // side: THREE.DoubleSide, //两面可见
    }); //材质对象
    var geometry = new THREE.ExtrudeGeometry( heartShape ,{
        depth: mapHeight, //拉伸长度
        bevelEnabled: false //无倒角
    });
    var mesh =  new THREE.Mesh( geometry, material )
    mesh.lngLat = lngLat
    mesh.name = name
    return mesh
}

export {model};